<template>
  <div class="scroll-container">
    <div class="flex-row main" ref="scrollRef">
      <slot></slot>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent, ref} from 'vue';
import {useIsCollapse} from "@/layout/hooks";


export default defineComponent({
  name: 'SwiperContainer',
  data() {
    return {
      lists: new Array(20)
    }
  },
  setup() {
    const scrollRef = ref()
    const scrollLeft = (step: number, isLeft = true) => {
      if (!scrollRef.value) {
        return;
      }
      const value = isLeft ? scrollRef.value.scrollLeft + step : scrollRef.value.scrollLeft - step;
      scrollRef.value.scrollLeft = value;
    }
    return {
      scrollRef,
      scrollLeft,
      ...useIsCollapse(),
    }
  }
});
</script>
<style lang="scss" scoped>
.scroll-container {
  background-color: sandybrown;
  overflow: hidden;

  .main {
    overflow-x: auto;
  }
}
</style>
